'use client';

import type { IPost } from '@/interfaces';
import classNames from 'classnames';
import Link from 'next/link';
import { useContext } from 'react';
import { HomeH5PageContext } from '@/contexts/mobile/home';
import Nodata from '@/app/[locale]/common/nodata/nodata';
import PostItem from '@/app/[locale]/common/post/item';

export default function PostHomeH5Page(
  this: any,
  {
    items = [],
    isInitialLoading,
    onClickLoadMore,
    isDisabled,
    isFetchingNextPage,
  }: {
    items?: IPost[];
    isInitialLoading?: boolean;
    onClickLoadMore: () => void;
    isDisabled: boolean;
    isFetchingNextPage: boolean;
  },
) {
  const context = useContext(HomeH5PageContext);
  const metadata = context.metadata!;

  return (
    <div className="vstack gap-3">
      <div className="hstack gap-4 align-items-center justify-content-between">
        <div className="h4 mb-0">所有帖子</div>
        <Link
          className={classNames(
            'text-decoration-none',
            items.length === 0 ? 'text-muted' : 'text-reset',
          )}
          href={`/sections/${
            context.currentSectionItem && context.currentSectionItem.id
          }`}
        >
          更多
        </Link>
      </div>

      {items.map((item, index) => {
        return (
          <div className="row" key={item.id}>
            <div className="col-12">
              {index > 0 && (
                <div
                  className="yw-bg"
                  style={{ height: '0.35rem', transform: 'scale(1.1)' }}
                ></div>
              )}
            </div>
            <div className="col-12 rounded-3">
              <PostItem item={item} metadata={metadata} />
            </div>
          </div>
        );
      })}

      <Loading isInitialLoading={isInitialLoading} />

      {items.length === 0 ? (
        <Nodata />
      ) : (
        <LoadMoreBtn
          onClickLoadMore={onClickLoadMore}
          isDisabled={isDisabled}
          isFetchingNextPage={isFetchingNextPage}
        />
      )}

      <div></div>
    </div>
  );
}

const Loading = ({ isInitialLoading }: { isInitialLoading?: boolean }) => {
  return (
    <>
      {isInitialLoading && (
        <div className="row overflow-hidden">
          <div
            className="col-12 yw-bg"
            style={{ height: '0.35rem', transform: 'scale(1.1)' }}
          ></div>
          <div className="col-12 bg-white rounded-3 py-4">
            <div className="vstack gap-3 align-items-center mt-4 text-secondary user-select-none">
              <div className="spinner-border" role="status">
                <span className="visually-hidden">Loading...</span>
              </div>
              <div>正在加载中...</div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

const LoadMoreBtn = ({
  onClickLoadMore,
  isDisabled,
  isFetchingNextPage,
}: {
  onClickLoadMore: () => void;
  isDisabled: boolean;
  isFetchingNextPage: boolean;
}) => {
  return (
    <div className="row mt-4 mb-3">
      <div className="col">
        <button
          onClick={onClickLoadMore}
          disabled={isFetchingNextPage && isDisabled}
          type="button"
          className="btn rounded-pill text-secondary-emphasis w-100"
        >
          {isFetchingNextPage ? (
            <>
              <span
                className="spinner-border spinner-border-sm me-2"
                role="status"
                aria-hidden="true"
              ></span>
              Loading...
            </>
          ) : (
            <i className="bi bi-three-dots"></i>
          )}
        </button>
      </div>
    </div>
  );
};
